<template>
  <div class="zero-drift tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:380px">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              start-placeholder="开始日期"
              format = 'yyyy-MM-dd HH:00:00'
              value-format = 'yyyy-MM-dd HH:00:00'
              end-placeholder="结束日期">
            </el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
      </div>&emsp;&emsp;
      <el-button @click="searchDate()"><i class="iconfont icon-sousuo" ></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有”24小时零点漂移“50次，共有合格项46个，不合格项4个。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">列表</el-radio-button>
              <el-radio-button label="2">图表</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div  class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :data="tableData"
              border
              height="100%">
              <el-table-column
                type="index"
                fixed
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                fixed
                label="日期"
                width="182">
                <template slot-scope="scope">
                  <span>{{ setTableDate(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item.indexName">
                <el-table-column
                  prop="gmResult"
                  label="测试结果"
                  width="80">
                  <template slot-scope="scope">
                    {{ scope.row[item.indexCode].value }}
                  </template>
                </el-table-column>
                <el-table-column label="零点核查">
                  <el-table-column
                    prop="gmCon"
                    width="90"
                    label="标准样浓度">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].standardSamplesValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmAbsolutely"
                    label="绝对误差">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].absoluteError }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmQualified"
                    label="合格情况">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].qualification }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="24小时零点漂移">
                  <el-table-column
                    prop="gmTest"
                    width="118"
                    label="前一次测试结果">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].lastValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmSpan"
                    label="跨度值">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].spanValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmRelative"
                    label="相对误差">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].relativeError === '-'? '-' : scope.row[item.indexCode].relativeError+'%' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmQualifiedPy"
                    label="合格情况">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].qualification }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table-column>
              <!--<el-table-column  label="氨氮(mg/L)">
                <el-table-column
                  prop="adResult"
                  label="测试结果">
                </el-table-column>
                <el-table-column label="零点核查">
                  <el-table-column
                    prop="adCon"
                    width="90"
                    label="标准样浓度">
                  </el-table-column>
                  <el-table-column
                    prop="adAbsolutely"
                    label="绝对误差">
                  </el-table-column>
                  <el-table-column
                    prop="adQualified"
                    label="合格情况">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="24小时零点漂移">
                  <el-table-column
                    prop="adTest"
                    width="118"
                    label="前一次测试结果">
                  </el-table-column>
                  <el-table-column
                    prop="adSpan"
                    label="跨度值">
                  </el-table-column>
                  <el-table-column
                    prop="adRelative"
                    label="相对误差">
                  </el-table-column>
                  <el-table-column
                    prop="adQualifiedPy"
                    label="合格情况">
                  </el-table-column>
                </el-table-column>
              </el-table-column>-->
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>
        <div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <el-scrollbar style="height: 100%;">
            <div v-if="stateRadio === '2'">
              <div v-for="(item,index) in chartList" :key="'k'+index" :id="setChartId(index)" style="height: 300px;"></div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      stateRadio: "1",
      value: ["w01019", "w21003"],
      optionData: [
        {
          value: "w01019",
          label: "高锰酸盐"
        },
        {
          value: "w21003",
          label: "氨氮"
        },
        {
          value: "w21011",
          label: "总磷"
        },
        {
          value: "w21001",
          label: "总氮"
        },
        {
          value: "w01001",
          label: "pH"
        },
        {
          value: "w21023",
          label: "水温"
        },
        {
          value: "w01009",
          label: "溶解氧"
        },
        {
          value: "w01014",
          label: "电导率"
        },
        {
          value: "w01003",
          label: "浊度"
        }
      ],
      tableData: [],
      tableHead: "",
      stationId: "",
      currentPage: 1, //分页组件当前页
      pageSize: 10, //分页每页多少条数据
      totalRecords: 0, //总条数
      pageList: [10, 15, 20], //设置每页多少条
      chartList: []
    };
  },
  computed: {
    totalPage() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.totalRecords / this.pageSize);
      return number === 0 ? 1 : number;
    },
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  methods: {
    //创建图表
    createdChart() {
      for (let i = 0; i < this.chartList.length; i++) {
        let chart = this.$echarts.init(
          document.getElementById("zeroDrift" + i)
        );
        let option = {
          title: {
            text: "24小时" + this.chartList[i].name + "零点漂移历史数据",
            x: "center",
            y: 20
          },
          xAxis: {
            type: "category",
            name: "时间",
            data: this.chartList[i].xAxis
          },
          legend: {
            data: [this.chartList[i].name],
            bottom: 0
          },
          yAxis: {
            type: "value",
            name: "相对误差(%)"
          },
          visualMap: {
            top: 10,
            right: -100,
            pieces: [
              {
                gte: -5,
                lte: 5,
                color: "#009966",
                label: "合格"
              },
              {
                gt: 5,
                color: "#d68787",
                label: "不合格"
              }
            ],
            outOfRange: {
              color: "#d68787"
            }
          },
          grid: {
            top: 80,
            left: 80,
            bottom: 50,
            right: 70
          },
          series: [
            {
              data: this.chartList[i].yAxis,
              name: this.chartList[i].name,
              type: "line",
              symbol: "triangle",
              symbolSize: 20,
              lineStyle: {
                normal: {
                  color: "#008000",
                  width: 4,
                  type: "dashed"
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 3,
                  color: "#0ec15a"
                }
              },
              markLine: {
                lineStyle: {
                  color: "red",
                  type: "solid"
                },
                data: [
                  { yAxis: this.chartList[i].upper, name: "最大误差" },
                  { yAxis: this.chartList[i].lower, name: "最小误差" }
                ]
              }
            }
          ]
        };
        chart.setOption(option);
      }
    },
    toggleTab(val) {
      // console.log(val);
      if (val === "2") {
        setTimeout(() => {
          this.createdChart();
        }, 500);
      }
    },
    paginationChange(val) {
      //分页页码改变时执行
      this.currentPage = val;
      this.searchZeroDrift();
    },
    paginationSizeChange(val) {
      //分页pageSize改变时执行
      this.pageSize = val;
      this.searchZeroDrift();
    },
    //查询按钮点击事件
    searchDate() {
      this.searchZeroDrift();
      this.searchZeroDriftChart();
    },
    //获取查询表格数据
    searchZeroDrift() {
      this.$http
        .get("/Quality/testData/zeroDriftData", {
          params: {
            startTime: this.dateRange[0],
            endTime: this.dateRange[1],
            indexCodes: this.value.join(","),
            stationCodes: this.stationId,//this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
            pageNumber: this.currentPage,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            this.tableHead =
              res.data.content.dataList.length > 0
                ? res.data.content.dataList[0]
                : [];
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
          }
        })
        .catch(error => {});
    },
    //获取查询图表数据
    searchZeroDriftChart() {
      this.$http
        .get("/Quality/testData/zeroDriftChartData", {
          params: {
            startTime: this.dateRange[0],
            endTime: this.dateRange[1],
            ifCurrentSection: true,// true为当前断面,false为所有
            indexCodes: this.value.join(","),
            stationCodes: this.stationId //this.stationId
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            this.chartList = res.data.content.dataList;
          }
        })
        .catch(error => {});
    },
    //设置图表id
    setChartId(index) {
      return "zeroDrift" + index;
    },
    setTableDate(data) {
      //设置时间
      for (let i in data) {
        return data[i].time;
      }
    }
  },
  mounted() {
    // this.searchZeroDrift();
    // this.searchZeroDriftChart();
  },
  created() {
    //初始化时间
    let startTime = new Date().setDate(new Date().getDate() - 1);
    let endTime = new Date();
    this.dateRange = [
      new Date(startTime).format("yyyy-MM-dd hh:00:00"),
      endTime.format("yyyy-MM-dd hh:00:00")
    ];
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.searchZeroDrift();
        this.searchZeroDriftChart();
      }
    }
  }
};
</script>

<style scoped lang="less">
.chart-wrap {
  border: 1px solid #dbe8f7;
}
</style>
